<template>
  <div class="con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft></template>
        <template #tableBody>
          <a-table size="mini" class="table-singe-line" :bordered="{ cell: true }" v-model:selectedKeys="rowSelectList" @selection-change="selectColumn" @sorter-change="sortChange" row-key="id" :loading="loading" :summary="summary" :row-selection="rowSelection" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="序号" :width="60" fixed="left">
                <template #cell="{ record, rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="店铺" :width="140" fixed="left">
                <template #cell="{ record, rowIndex }">
                  {{ record.shopName }}
                </template>
              </a-table-column>
              <a-table-column title="销售员" :width="60" fixed="left">
                <template #cell="{ record, rowIndex }">
                  {{ record.salesmanName }}
                </template>
              </a-table-column>
              <a-table-column title="FNSKU" :width="100" fixed="left">
                <template #cell="{ record, rowIndex }">
                  <a-popover>
                    <p style="width: 100%" class="text-limit">{{ record.fnsku }}</p>
                    <template #content>
                      <p>{{ record.fnsku }}</p>
                    </template>
                  </a-popover>
                </template>
              </a-table-column>
              <a-table-column title="图片" :width="60" fixed="left" data-index="productImg">
                <template #cell="{ record, rowIndex }">
                  <ImgPopover :src="record.productImg">
                    <template #con>
                      <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                    </template>
                  </ImgPopover>
                </template>
              </a-table-column>
              <a-table-column title="msku" :width="100">
                <template #cell="{ record, rowIndex }">
                  <a-popover>
                    <p style="width: 100%" class="text-limit">{{ record.msku }}</p>
                    <template #content>
                      <p>{{ record.msku }}</p>
                    </template>
                  </a-popover>
                </template>
              </a-table-column>

              <a-table-column title="SKU" :width="100">
                <template #cell="{ record, rowIndex }">
                  <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="2" />
                </template>
              </a-table-column>

              <a-table-column :width="260" title="FBA在途仓">
                <a-table-column title="期初库存" :width="100" data-index="onWayBeginNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayBeginNum }}
                  </template>
                </a-table-column>
                <a-table-column title="期初单价" :width="80" data-index="onWayBeginPrice">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayBeginPrice }}
                  </template>
                </a-table-column>
                <a-table-column title="期初货值" :width="100" data-index="onWayBeginValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayBeginValue }}
                  </template>
                </a-table-column>
                <a-table-column title="入库数量" :width="100" data-index="onWayInNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayInNum }}
                  </template>
                </a-table-column>
                <a-table-column title="入库货值" :width="100" data-index="onWayInValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayInValue }}
                  </template>
                </a-table-column>
                <a-table-column title="出库数量" :width="100" data-index="onWayOutNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayOutNum }}
                  </template>
                </a-table-column>
                <a-table-column title="出库货值" :width="100" data-index="onWayOutValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayOutValue }}
                  </template>
                </a-table-column>
                <a-table-column title="期末库存" :width="100" data-index="onWayEndNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayEndNum }}
                  </template>
                </a-table-column>
                <a-table-column title="期末单价" :width="80" data-index="onWayEndPrice">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayEndPrice }}
                  </template>
                </a-table-column>
                <a-table-column title="期末货值" :width="100" data-index="onWayEndValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.onWayEndValue }}
                  </template>
                </a-table-column>
              </a-table-column>
              <a-table-column :width="260" title="FBA映射仓">
                <a-table-column title="期初库存" :width="100" data-index="mappedBeginNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.mappedBeginNum }}
                  </template>
                </a-table-column>
                <a-table-column title="期初单价" :width="100" data-index="mappedBeginPrice" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.mappedBeginPrice }}
                  </template>
                </a-table-column>
                <a-table-column title="期初货值" :width="100" data-index="mappedBeginValuemappedReceiptsInNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.mappedBeginValue }}
                  </template>
                </a-table-column>

                <a-table-column title="收货入库" :width="100">
                  <a-table-column title="数量" :width="80" data-index="mappedReceiptsInNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedReceiptsInNum }}
                    </template>
                  </a-table-column>
                  <a-table-column title="货值" :width="80" data-index="mappedReceiptsInValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedReceiptsInValue }}
                    </template>
                  </a-table-column>
                </a-table-column>
                <a-table-column title="其他入库" :width="100">
                  <a-table-column title="数量" :width="80" data-index="mappedOthersInNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedOthersInNum }}
                    </template>
                  </a-table-column>
                  <a-table-column title="货值" :width="80" data-index="mappedOthersInValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedOthersInValue }}
                    </template>
                  </a-table-column>
                </a-table-column>
                <a-table-column title="销售出库" :width="100">
                  <a-table-column title="数量" :width="80" data-index="mappedShipmentsOutNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedShipmentsOutNum }}
                    </template>
                  </a-table-column>
                  <a-table-column title="货值" :width="80" data-index="mappedShipmentsOutValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedShipmentsOutValue }}
                    </template>
                  </a-table-column>
                </a-table-column>
                <a-table-column title="其他出库" :width="100">
                  <a-table-column title="数量" :width="80" data-index="mappedOthersOutNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedOthersOutNum }}
                    </template>
                  </a-table-column>
                  <a-table-column title="货值" :width="80" data-index="mappedOthersOutValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                    <template #cell="{ record, rowIndex }">
                      {{ record.mappedOthersOutValue }}
                    </template>
                  </a-table-column>
                </a-table-column>

                <a-table-column title="期末库存" :width="100" data-index="mappedEndNum" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.mappedEndNum }}
                  </template>
                </a-table-column>
                <a-table-column title="期末单价" :width="100" data-index="mappedEndPrice" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.mappedEndPrice }}
                  </template>
                </a-table-column>
                <a-table-column title="期末货值" :width="100" data-index="mappedEndValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.mappedEndValue }}
                  </template>
                </a-table-column>
              </a-table-column>
            </template>
            <template #summary-cell="{ column, record, rowIndex }">
              <div>{{ record[column.dataIndex] }}</div>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { findWarehouseListByParam, findShopListByShare } from '@/api/warehouse'
  import { findFbaInventoryIoSumPage } from '@/api/inventory'
  import { getCategoryList } from '@/api/product'
  import { getOrganizesUser } from '@/api/system'
  import _ from 'lodash-es'
  import dayjs from 'dayjs'
  export default defineComponent({
    components: { TableWrap, FilterTable },
    setup() {
      const data: any = reactive({
        loading: false,
        tableList: [],
        filterItem: [
          {
            key: 'shopIds',
            label: '选择店铺',
            value: ref(),
            type: 'select_multiple',
            width: 160,
            optionItems: [],
            attrs: {
              multiple: true,
              'max-tag-count': 1,
            },
          },
          {
            key: 'salesmanId',
            label: '运营',
            placeholder: '选择运营',
            value: ref(),
            type: 'select',
            width: 180,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            type: 'input_keyword',
            key: 'sku',
            keyItems: [
              { label: 'SKU', value: 'sku' },
              { label: 'MSKU', value: 'msku' },
              { label: 'FNSKU', value: 'fnSkus' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 180,
            isMultiple: true,
          },
          {
            type: 'cascader',
            key: 'cateId',
            optionItems: [],
            keyWidth: '120',
            value: ref(),
            placeholder: '请选择',
            label: '类目',
            width: 200,
            isMultiple: true,
          },
          {
            key: 'date',
            label: '日期',
            value: ref([`${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`, `${dayjs().format('YYYY-MM-DD')} 23:59:59`]),
            type: 'date_range',
            width: 240,
            undeletable: true,
            attrs: {
              placeholder: ['开始日期', '结束日期'],
              defaultValue: [`${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`, `${dayjs().format('YYYY-MM-DD')} 23:59:59`],
              'allow-clear': false,
            },
          },
        ],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        rowSelectList: [],
        detailInfo: {},
        searchValue: {
          startDate: `${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`,
          endDate: `${dayjs().format('YYYY-MM-DD')} 23:59:59`,
        },
        summartData: {},
      })
      const summary = () => {
        let obj = {
          onWayBeginNum: 0,
          onWayBeginValue: 0,
          onWayInNum: 0,
          onWayInValue: 0,
          onWayOutNum: 0,
          onWayOutValue: 0,
          onWayEndNum: 0,
          onWayEndValue: 0,
          mappedBeginNum: 0,
          mappedBeginValue: 0,
          mappedReceiptsInNum: 0,
          mappedOthersInNum: 0,
          mappedShipmentsOutNum: 0,
          mappedOthersOutNum: 0,
          mappedEndNum: 0,
          mappedEndValue: 0,
        }

        obj.onWayBeginNum = data.summartData?.onWayBeginNum || 0
        obj.onWayBeginValue = data.summartData?.onWayBeginValue || 0
        obj.onWayInNum = data.summartData?.onWayInNum || 0
        obj.onWayInValue = data.summartData?.onWayInValue || 0
        obj.onWayOutNum = data.summartData?.onWayOutNum || 0
        obj.onWayOutValue = data.summartData?.onWayOutValue || 0
        obj.onWayEndNum = data.summartData?.onWayEndNum || 0
        obj.onWayEndValue = data.summartData?.onWayEndValue || 0
        obj.mappedBeginNum = data.summartData?.mappedBeginNum || 0
        obj.mappedBeginValue = data.summartData?.mappedBeginValue || 0
        obj.mappedReceiptsInNum = data.summartData?.mappedReceiptsInNum || 0
        obj.mappedOthersInNum = data.summartData?.mappedOthersInNum || 0
        obj.mappedShipmentsOutNum = data.summartData?.mappedShipmentsOutNum || 0
        obj.mappedOthersOutNum = data.summartData?.mappedOthersOutNum || 0
        obj.mappedEndNum = data.summartData?.mappedEndNum || 0
        obj.mappedEndValue = data.summartData?.mappedEndValue || 0

        // return [
        //   {
        //     productImg: '合计',
        //     ...obj,
        //   },
        // ]
      }

      const searchByVal = (info: any) => {
        let obj = _.cloneDeep(info)
        data.searchValue = {}
        data.searchValue = info
        console.log(obj.date[0].split(' '))

        if (obj.date && obj.date[0].split(' ').length <= 1) {
          data.searchValue.startDate = `${obj['date'][0]} 00:00:00`
          data.searchValue.endDate = `${obj['date'][1]} 23:59:59`
        } else {
          data.searchValue.startDate = `${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`
          data.searchValue.endDate = `${dayjs().format('YYYY-MM-DD')} 23:59:59`
        }
        delete data.searchValue.date
        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const sortChange = (item: any, extra: any) => {
        if (extra) {
          data.searchValue.sortField = item
          data.searchValue.sortType = extra == 'ascend' ? '1' : '-1'
        } else {
          data.searchValue.sortField = ''
          data.searchValue.sortType = ''
        }
        getList()
      }

      const selectColumn = (val: any) => {
        data.rowSelectList = val
      }

      const getList = async (searchValue?: any) => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await findFbaInventoryIoSumPage(params)
        if (res.code == 'SUCCESS') {
          data.tableList = res.data.records
          data.pageNation.total = res.data.total
        }
        data.loading = false
      }
      // 获取用户列表
      const getUSerList = async () => {
        let params = {
          depart: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res: any = await getOrganizesUser(params)
        if (res.code == 'SUCCESS') {
          let userList = res?.data?.records
          userList.map((e: any) => {
            e.label = e.userName
            e.value = e.id
            return e
          })
          data.filterItem[1].optionItems = userList
        }
      }

      const getShopListByShare = async () => {
        const res = await findShopListByShare({ share: false })
        let arr = res?.data
        arr.map((e: any) => {
          e.label = e.shopName
          e.value = e.id
        })
        data.filterItem[0].optionItems = arr
      }

      const getCategory = async () => {
        const res: any = await getCategoryList()
        data.filterItem[3].optionItems = res.data
      }

      // const getSummartData = async () => {
      //   let params = {
      //     ...data.searchValue,
      //   }
      //   const res = await findInventorySum(params)
      //   data.summartData = res?.data || {}
      // }

      getUSerList()
      getShopListByShare()
      getCategory()
      getList()
      return {
        ...(toRefs(data) as any),
        searchByVal,
        changePage,
        sizeChange,
        selectColumn,
        summary,
        sortChange,
        getList,
      }
    },
  })
</script>

<style lang="less" scoped></style>
